@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-search';
@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";

$sizes: 's', 'm', 'l';

.decorator {
  display: flex;
  flex-grow: 1;
  align-items: center;

  box-sizing: border-box;
  width: 100%;
  min-width: 0;

  background-color: $sys-neutral-background1-level;
  border-color: transparent;
  border-style: solid;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($search, $size);
    }
  }

  &[data-outline] {
    border-color: $sys-neutral-decor-default;
  }

  &:hover {
    background-color: $sys-neutral-background2-level;
    border-color: $sys-primary-decor-hovered;
  }

  &:focus-within,
  &[data-focused] {
    @include outline-var($container-focused-m);

    background-color: $sys-neutral-background2-level;
    border-color: $sys-primary-accent-default;
    outline-color: $sys-primary-decor-activated;
  }
}

